<template>
	<view>
		<u-popup :show="show" round="15" mode="center">
		   <view class="app-update-outer">
			<view class="app-update">
				<view class="version">
					{{downServerData.versionName}}
				</view>
				<view class="content">
					<view class="new-info">
						<image src="/static/update/left.png" mode=""></image>
						<view class="ni-title">
							新功能<text>上线了</text>
						</view>
						<image src="/static/update/right.png" mode=""></image>
					</view>
					<view class="content-info">
						<view class="ci-item">
							<text>{{downServerData.versionInfo}}</text>
						</view>
					</view>
					<view class="content-progress" v-if="isUpdate">
						<!-- 进度条 -->
						<cmd-progress :percent="percent" stroke-color="linear-gradient(to right, #59120C, #15110E)">
						</cmd-progress>
						<view class="">
							{{updateText}}
						</view>
					</view>
					<view class="content-btn" v-if="!isUpdate">
						<view class="cb-inner">
							<!-- <view class="cb-left" @tap="noNeed">
								不需要
							</view> -->
							<view class="cb-right" @tap="updateApp">
								立即更新
							</view>
						</view>
					</view>
					<!-- <view class="content-btn" v-if="isUpdate">
						<view class="cb-inner">
							<view class="cb-left" @tap="cancelDown">
								取消更新
							</view>
							<view class="cb-right" @tap="houTaiDown">
								后台更新
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<!-- <image class="close" src="../../../static/index/popup-close.png" @tap="noNeed"></image> -->
		   </view>
		</u-popup>
		
	</view>
</template>

<script>
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	export default {
		components: {
			cmdProgress
		},
		data() {
			return {
				updateText: '',
				isUpdate: false,
				percent: 0,
				dtask: '', //下载相关
				show: false
			}
		},
		props: {
			// isUpdate:{
			// 	type:Boolean,
			// 	default:false
			// },
			downServerData: {
				type: Object,
				default: {}
			}
		},
		onShow() {

		},
		onHide() {

		},
		onLoad() {},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			// 取消下载
			cancelDown() {
				this.dtask && this.dtask.abort();
				this.$emit('cancelDownload')
				// uni.showToast({
				// 	title: "已取消下载",
				// 	icon: "none"
				// });
			},
			// 后台下载
			houTaiDown() {
				this.$emit('houTaiDownload')
			},
			// 不需要
			noNeed() {
				this.$emit('noNeed')
			},
			// 更新app
			updateApp() {
				this.isUpdate = true
				console.log("我是组件");
				console.log(this.downServerData);
				this.getDownload(this.downServerData)
			},
			getDownload(data) {
				// let dtask;
				if (data.updateType == 'forcibly' || data.updateType == 'solicit') {
					// let popupData = {
					// 	progress: true,
					// 	buttonNum: 2
					// };
					// if (data.updateType == 'forcibly') {
					// 	popupData.buttonNum = 0;
					// }
					let lastProgressValue = 0;
					// let popupObj = downloadPopup(popupData);
					this.dtask = plus.downloader.createDownload(data.downloadUrl, {
						filename: "_doc/update/"
					}, function(download, status) {
						if (status == 200) {
							// popupObj.change({
							// 	progressValue: 100,
							// 	progressTip: "正在安装文件...",
							// 	progress: true,
							// 	buttonNum: 0
							// });

							plus.runtime.install(download.filename, {}, function() {
								// popupObj.change({
								// 	contentText: "应用资源更新完成！",
								// 	buttonNum: 1,
								// 	progress: false
								// });

								uni.showToast({
									title: '应用资源更新完成',
									icon: 'none'
								})
							}, function(e) {
								// popupObj.cancel();
								plus.nativeUI.alert("安装文件失败[" + e.code + "]：" + e.message);
							});
						} else {
							// popupObj.change({
							// 	contentText: "文件下载失败...",
							// 	buttonNum: 1,
							// 	progress: false
							// });
							uni.showToast({
								title: '文件更新失败...',
								icon: 'none'
							})

						}
					});
					this.dtask.start();
					this.dtask.addEventListener("statechanged", (task, status) => {
						switch (task.state) {
							case 1: // 开始
								// popupObj.change({
								// 	progressValue: 0,
								// 	progressTip: "准备下载...",
								// 	progress: true
								// });
								console.log(1111);
								this.updateText = "准备更新..."

								break;
							case 2: // 已连接到服务器  
								// popupObj.change({
								// 	progressValue: 0,
								// 	progressTip: "开始下载...",
								// 	progress: true
								// });
								console.log(2222);
								this.updateText = "开始更新..."
								break;
							case 3:
								const progress = parseInt(task.downloadedSize / task.totalSize * 100);
								if (progress - lastProgressValue >= 2) {
									lastProgressValue = progress;
									// popupObj.change({
									// 	progressValue: progress,
									// 	progressTip: "已下载" + progress + "%",
									// 	progress: true
									// });
									console.log(333);
									this.updateText = "更新中···"
									this.percent = progress
									// console.log(this.updateText);
									// console.log(this.percent);
									return
								}
								break;
						}
					});
					// 取消下载
					// popupObj.cancelDownload = function() {
					// 	dtask && dtask.abort();
					// 	uni.showToast({
					// 		title: "已取消下载",
					// 		icon: "none"
					// 	});
					// }
					// 重启APP
					// popupObj.reboot = function() {
					// 	plus.runtime.restart();
					// }
				} else if (data.updateType == "silent") {
					this.dtask = plus.downloader.createDownload(data.downloadUrl, {
						filename: "_doc/update/"
					}, function(download, status) {
						if (status == 200) {
							plus.runtime.install(download.filename, {}, function() {
								console.log("应用资源更新完成");
							}, function(e) {
								plus.nativeUI.alert("安装文件失败[" + e.code + "]：" + e.message);
							});
						} else {
							plus.nativeUI.alert("文件更新失败...");
						}
					});
					this.dtask.start();
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.app-update-outer {
		display:flex;
		flex-direction:column;
		align-items:center;
		.close{
			width: 100rpx;
			height: 100rpx;
			margin-top: 20rpx;
		}
	}

	.app-update {
		width: 540rpx;
		// height: 620rpx;
		background-image: url('/static/update/update_main.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
		overflow: hidden;
		padding-bottom: 40rpx;
		border-radius: 20rpx;

		.version {
			position: absolute;
			width: 71rpx;
			height: 38rpx;
			background-image: url('/static/update/version.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			top: 42rpx;
			right: 224rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 2px;

		}

		.content {
			width: 88%;
			margin: 0 auto;
			background: linear-gradient(180deg, #FFFFFF 0%, #FACDC8 100%);
			border-radius: 10px;
			margin-top: 200rpx;

			.new-info {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-top: 39rpx;

				image {
					width: 18rpx;
					height: 18rpx;
				}

				.ni-title {
					margin: 0 25rpx;
				}
			}

			.content-info {
				width: 80%;
				margin: 39rpx auto;
				text-align: left;

				.ci-item {
					font-size: 24rpx;
					color: #120C0C;
				}
			}

			.content-progress {
				width: 80%;
				margin: 0 auto;
				font-size: 22rpx;
				padding-bottom: 20rpx;
			}

			.content-btn {
				width: 84%;
				margin: 6rpx auto 23rpx;
				box-sizing: border-box;
				padding-bottom: 23rpx;

				.cb-inner {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.cb-left,
					.cb-right {
						padding: 15rpx 43rpx;
						border: 1px solid #15110E;
						border-radius: 50rpx;
						font-size: 26rpx;
					}

					.cb-right {
						background-color: #15110E;
						color: #FFFFFF;
					}
				}

			}
		}


	}
</style>
